<script setup lang="ts">
import { computed, ref } from 'vue';
import { useMessage } from 'naive-ui';
import { fetchRecharge } from '@/service/api/user';
import { useAppStore } from '@/store/modules/app';
import { useAuthStore } from '@/store/modules/auth';
import UserInfoCard from './modules/user-info-card.vue';
import GameStatsCard from './modules/game-stats-card.vue';
import RecentGamesCard from './modules/recent-games-card.vue';
import DraggableWidget from './modules/draggable-widget.vue';

const appStore = useAppStore();
const authStore = useAuthStore();

const rechargeModal = ref(false);
const rechargeAmount = ref<number | null>(null);
const rechargeLoading = ref(false);
const message = useMessage();
const userInfoCardRef = ref();

const handleRecharge = async () => {
  const userId = authStore.userInfo.userId;
  console.log('[充值调试] 当前 userId:', userId, '充值金额:', rechargeAmount.value);
  if (!userId || userId === 'undefined') {
    console.log('[充值调试] userId 校验未通过');
    message.error('用户ID不能为空，请重新登录');
    return;
  }
  if (!rechargeAmount.value || rechargeAmount.value <= 0) {
    console.log('[充值调试] 金额校验未通过');
    message.error('请输入有效的充值金额');
    return;
  }
  rechargeLoading.value = true;
  try {
    await fetchRecharge(userId, rechargeAmount.value);
    console.log('[充值调试] 充值接口调用成功');
    message.success('充值成功');
    rechargeModal.value = false;
    rechargeAmount.value = null;
    userInfoCardRef.value?.loadUserInfo?.();
  } catch {
    console.log('[充值调试] 充值接口调用失败');
    message.error('充值失败');
  } finally {
    rechargeLoading.value = false;
  }
};

const gap = computed(() => (appStore.isMobile ? 0 : 20));
</script>

<template>
  <div class="user-center-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-icon">
          <SvgIcon icon="mdi:account-circle" />
        </div>
        <div class="header-text">
          <h1 class="page-title">个人中心</h1>
          <p class="page-subtitle">管理你的个人信息和游戏数据</p>
        </div>
        <div style="flex: 1"></div>
        <NButton
          type="primary"
          size="large"
          style="border-radius: 20px; min-width: 100px; margin-left: 24px"
          @click="rechargeModal = true"
        >
          <template #icon>
            <SvgIcon icon="mdi:cash-plus" />
          </template>
          充值
        </NButton>
      </div>
    </div>

    <!-- 充值弹窗 -->
    <NModal v-model:show="rechargeModal" preset="card" title="充值" style="max-width: 350px">
      <NInputNumber
        v-model:value="rechargeAmount"
        placeholder="请输入充值金额"
        :min="1"
        style="width: 100%; margin-bottom: 16px"
      />
      <template #footer>
        <NButton @click="rechargeModal = false">取消</NButton>
        <NButton type="primary" :loading="rechargeLoading" :disabled="rechargeLoading" @click="handleRecharge">
          确认
        </NButton>
      </template>
    </NModal>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <NSpace vertical :size="24">
        <!-- 用户信息卡片 -->
        <UserInfoCard ref="userInfoCardRef" />

        <!-- 游戏统计和最近游玩 -->
        <NGrid :x-gap="gap" :y-gap="24" responsive="screen" item-responsive>
          <NGi span="24 s:24 m:12">
            <GameStatsCard />
          </NGi>
          <NGi span="24 s:24 m:12">
            <RecentGamesCard />
          </NGi>
        </NGrid>
      </NSpace>
    </div>

    <!-- 可拖动小挂件 -->
    <DraggableWidget />
  </div>
</template>

<style scoped>
.user-center-container {
  min-height: 100vh;
  background: linear-gradient(120deg, #f8fafc 0%, #e0e7ef 100%);
  position: relative;
  overflow-x: hidden;
}

.page-header {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding: 32px 0;
  margin-bottom: 32px;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-icon {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  color: white;
  font-size: 28px;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.header-text {
  flex: 1;
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  color: #2d3748;
  margin: 0 0 8px 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.page-subtitle {
  font-size: 16px;
  color: #718096;
  margin: 0;
  font-weight: 500;
}

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 32px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    padding: 24px 0;
    margin-bottom: 24px;
  }

  .header-content {
    padding: 0 16px;
    gap: 16px;
  }

  .header-icon {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }

  .page-title {
    font-size: 24px;
  }

  .page-subtitle {
    font-size: 14px;
  }

  .main-content {
    padding: 0 16px 24px;
  }
}

/* 添加一些装饰性背景元素 */
.user-center-container::before {
  display: none;
}

@keyframes background-float {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  100% {
    transform: translate(-50px, -50px) rotate(360deg);
  }
}
</style>
